/**
 * Created by xuelei.kong on 2017/7/16.
 */
var forEach = function (arr, fn) {
    var len = arr.length;
    for (var i = 0; i < len; i++) {
        var tmp = arr[i];
        if (fn.call(tmp, i, tmp) == false) {
            break;
        }
    }

};

function formatDate(date, fmt) {
    var D = new Date(date);
    var o = {
        "M+": D.getMonth() + 1, //月份
        "d+": D.getDate(), //日
        "h+": D.getHours(), //小时
        "m+": D.getMinutes(), //分
        "s+": D.getSeconds(), //秒
        "q+": Math.floor((D.getMonth() + 3) / 3), //季度
        "S": D.getMilliseconds() //毫秒
    };

    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (D.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

var showDatePicker = function (obj, type) {
    if (type === 1) {
        WdatePicker({
            maxDate: $(obj).parents('.filter-wrapper').find(".to").val(),
            onpicked: function () {
                $(obj).blur();
            }
        })
    } else {
        WdatePicker({
            minDate: $(obj).parents('.filter-wrapper').find(".from").val(),
            onpicked: function () {
                $(obj).blur();
            }
        })
    }

};
var colors = ['#ff030c', '#00fff0', '#0aabfa', '#00f735'];

var app = new Vue({
    el: '#app',
    data: function () {
        return {
            loadingFlag: false,
            ztreeLoadingFlag: false,
            startDate: formatDate(new Date().getTime() - 24 * 60 * 60 * 1000, 'yyyy-MM-dd'),
            endDate: formatDate(new Date().getTime(), 'yyyy-MM-dd'),
            equipmentID: [],
            equipment: [],
            DataList:[],
            lineOption1: {

                title: {
                    text: ''
                }
                ,
                tooltip: {
                    trigger: 'axis',
                    backgroundColor:
                        'rgba(0,0,0,.3)',
                    padding:
                        10,
                    formatter:

                        function (params) {
                            console.log(params);
                            return '<div style="font-size: 12px;"><p style="color:#02fdff">' + params[0].axisValue + '日</p><p style="font-size: 12px;color:#FF47CC">上月：' + params[0].value + '元</p><p style="font-size: 12px;color:#FFCC33">本月：' + params[1].value + '元</p></div>'
                        }
                }
                ,
                backgroundColor: "rgba(0, 0, 0, 0.3)",
                legend:
                    {
                        right:"10%",
                        top:'10',
                        data: [
                            {
                                name: "上月",
                                icon: 'circle',
                                textStyle: {
                                    color: '#FF47CC',
                                    fontSize: 12
                                }
                            },
                            {
                                name: "本月",
                                icon: 'circle',
                                textStyle: {
                                    color: '#FFCC33',
                                    fontSize: 12
                                }
                            }

                        ]
                    }
                ,
                grid: {

                    left: '3%',
                    right:
                        '6%',
                    bottom:
                        '3%',
                    containLabel:
                        true
                }
                ,
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                }
                ,
                xAxis: {
                    name: "日",
                    type: 'category',
                    boundaryGap: false,
                    axisLine:
                        {
                            lineStyle: {
                                color: '#008078'
                            }
                        }
                    ,
                    axisLabel: {
                        textStyle: {
                            color: '#00f3ff'
                        }
                    }
                    ,
                    data: [1,2,3,4]
                }
                ,
                yAxis: {
                    name: "元",
                    type:
                        'value',
                    axisLine:
                        {
                            lineStyle: {
                                color: '#008078'
                            }
                        }
                    ,
                    axisLabel: {
                        textStyle: {
                            color: '#00f3ff'
                        }
                    }
                    ,
                    splitLine: {
                        lineStyle: {
                            type: "doote",
                            color:
                                '#4a6b70'

                        }
                    }

                }
                ,
                series: [
                    {
                        name: "上月",
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#FF47CC',
                                lineStyle: {
                                    color: '#FF47CC'
                                }
                            }
                        },
                        data: [1,2,3,32]
                    },
                    {
                        name: "本月",
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#FFCC33',
                                lineStyle: {
                                    color: '#FFCC33'
                                }
                            }
                        },
                        data: [3,22,3,23]
                    }
                ]
            },
            lineOption2: {

                title: {
                    text: ''
                }
                ,
                tooltip: {
                    trigger: 'axis',
                    backgroundColor:
                        'rgba(0,0,0,.3)',
                    padding:
                        10,
                    formatter:

                        function (params) {
                            console.log(params);
                            return '<div style="font-size: 12px;"><p style="color:#02fdff">' + params[0].axisValue + '日</p><p style="font-size: 12px;color:#00C8FF">上月：' + params[0].value + '元</p><p style="font-size: 12px;color:#00FF00">本月：' + params[1].value + '元</p></div>'
                        }
                }
                ,
                backgroundColor: "rgba(0, 0, 0, 0.3)",
                legend:
                    {
                        right:"10%",
                        top:'10',
                        data: [
                            {
                                name: "上月",
                                icon: 'circle',
                                textStyle: {
                                    color: '#00C8FF',
                                    fontSize: 12
                                }
                            },
                            {
                                name: "本月",
                                icon: 'circle',
                                textStyle: {
                                    color: '#00FF00',
                                    fontSize: 12
                                }
                            }

                        ]
                    }
                ,
                grid: {

                    left: '3%',
                    right:
                        '6%',
                    bottom:
                        '3%',
                    containLabel:
                        true
                }
                ,
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                }
                ,
                xAxis: {
                    name: "日",
                    type: 'category',
                    boundaryGap: false,
                    axisLine:
                        {
                            lineStyle: {
                                color: '#008078'
                            }
                        }
                    ,
                    axisLabel: {
                        textStyle: {
                            color: '#00f3ff'
                        }
                    }
                    ,
                    data: [1,2,3,4]
                }
                ,
                yAxis: {
                    name: "元",
                    type:
                        'value',
                    axisLine:
                        {
                            lineStyle: {
                                color: '#008078'
                            }
                        }
                    ,
                    axisLabel: {
                        textStyle: {
                            color: '#00f3ff'
                        }
                    }
                    ,
                    splitLine: {
                        lineStyle: {
                            type: "doote",
                            color:
                                '#4a6b70'

                        }
                    }

                }
                ,
                series: [
                    {
                        name: "上月",
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#00C8FF',
                                lineStyle: {
                                    color: '#00C8FF'
                                }
                            }
                        },
                        data: [1,2,3,32]
                    },
                    {
                        name: "本月",
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#00FF00',
                                lineStyle: {
                                    color: '#00FF00'
                                }
                            }
                        },
                        data: [3,22,3,23]
                    }
                ]
            }

        }
    },
    mounted: function () {
        //成本分析接口 http://180.166.106.206:8086/Cost/CostData?EnergyType=1
        // EnergyType
        // 1 电
        // 2 水
        // 3 天然气
        // 4 油
        // 5 生物质
        // 6 人工煤气
        this.getData();


    },
    methods: {
        selectType: function (type, id) {
            this[type] = id
        },
        //获取折线图数据
        getData: function () {
            var that = this;
            that.loadingFlag = true;
            $.ajax({
                url: "http://180.166.106.206:8086/Cost/CostData?EnergyType=1",
                dataType: 'json',
                type: "POST",
                success: function (res) {
                    console.log(res);
                    var pieData;
                    that.loadingFlag = false;
                    // that.DataList = res.List[0];
                    // that.lineOption1.xAxis.data = [];
                    // that.lineOption1.series[0].data = [];

                    // forEach(res.List[0].Labels, function (i, item) {
                    //     that.lineOption.xAxis.data.push(item);
                    //     that.lineOption.series[0].data.push(
                    //         {
                    //             date: item,
                    //             value: res.List[0].Values[i]
                    //         }
                    //     )
                    // });


                    var yzhcbyChart = echarts.init(document.getElementById('yzhcb'));
                    yzhcbyChart.setOption(that.lineOption1);

                    var yydcbChart = echarts.init(document.getElementById('yydcb'));
                    yydcbChart.setOption(that.lineOption2);

                }
            });
        },
        //查询方法
        search: function () {

            if (!this.startDate || !this.endDate) {
                alert("请选择起止时间");
                return;
            }
            if (!this.equipmentID.length) {
                alert('请选择设备');
                return;
            }
            this.getData();

        },
        searchNode: function () {
            var value = this.$refs.ztreesearch.value;
            if (value == "") return;

            // 获取搜索的节点
            var nodes = this.ztree.getNodesByParamFuzzy("name", value);
            // 关闭所有节点的高亮
            var allNodes = this.ztree.transformToArray(this.ztree.getNodes());
            for (var i = 0; i < allNodes.length; i++) {
                allNodes[i].highlight = false;
                this.ztree.updateNode(allNodes[i]);
            }
            // 展开第一层节点
            this.ztree.expandAll(false);
            this.ztree.expandNode(this.ztree.getNodes()[0], true);
            // 高亮并展开搜索到的节点
            for (var i = 0; i < nodes.length; i++) {
                nodes[i].highlight = true;
                this.ztree.updateNode(nodes[i]); // 更新节点，让高亮生效
                this.ztree.expandNode(nodes[i].getParentNode(), true);
            }
        },
        searchNodeLazy: function () {
            var timeoutId = null;
            var that = this;
            var value = event.target.value;
            if (timeoutId) {
                console.log(222);
                clearTimeout(timeoutId);
            }
            timeoutId = setTimeout(function () {
                console.log(111);
                that.searchNode(value);
            }, 500);
        },
        setViewModel: function (which) {
            this[which] = event.target.value;
        }

    }
});


$('.extend').hover(function () {
    $('body').toggleClass('extended');

});